<template>
	<div id="pedigree">
		<el-card class="mycard" shadow="hover">
			<span>新建分析项</span>
			<el-form ref="form" label-position="left" :model="form" label-width="120px">
				<el-form-item label="导入文件">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-input v-model="form.name"></el-input>
						</el-col>
						<el-col :span="2" v-if="!multiple">
							<el-upload
								class="upload-demo"
								ref="upload"
								action
								:on-preview="handlePreview"
								:on-remove="handleRemove"
								:on-change="handleChange"
								:file-list="fileList"
								:http-request="uploadFile"
								:auto-upload="false"
								:limit="limit"
							>
								<el-button slot="trigger" class="uploadbtn" type="primary">选择文件并上传</el-button>
							</el-upload>
						</el-col>
						<el-col :span="2" v-if="multiple">
							<span class="fileinput-button">
								<el-button slot="trigger" class="uploadbtn" type="primary">选择文件夹并上传</el-button>
								<input type="file" name="file" ref="file" id="fileInp" @change="uploadDirectory($event)" webkitdirectory multiple />
							</span>
						</el-col>
					</el-row>
					<!-- <el-button type="primary" class="uploadbtn" plain>选择文件并上传</el-button> -->
					<!-- <button class="uploadbtn">选择文件并上传</button> -->
				</el-form-item>
				<el-form-item label="HASH查询" size="normal">
					<el-row :gutter="20">
						<el-col :span="8" :offset="0">
							<el-input v-model="form.hash" placeholder="输入hash值" size="normal" clearable></el-input>
						</el-col>
						<el-col :span="2" :offset="0">
							<el-button type="primary" size="default" @click="submitUpload">查询</el-button>
						</el-col>
					</el-row>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="mycard" shadow="hover">
			<el-button type="primary" @click="toHistoryRecord">查看历史分析记录</el-button>
			<el-button type="primary" @click="toToolsetList">返回工具集列表</el-button>
			<el-button type="primary" @click="toTrafficList">图片流量列表</el-button>
			<el-button type="primary" @click="download">下载规则库文件</el-button>
		</el-card>
		<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>历史线索查询结果列表</span>
			</div>
			<el-table :data="hisTableData" border stripe>
				<el-table-column v-for="col in columns" :prop="col.label + col.id" :key="col.id" :label="col.label" :width="col.width"> </el-table-column>
				<el-table-column label="操作" :width="120">
					<template slot-scope="scope">
						<el-button size="mini" @click="views(scope.$index, scope.row)">查看详情</el-button>
						<!-- <el-button size="mini">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>
<script>
export default {
	data() {
		return {
			form: {
				name: '',
			},
			columns: [{ id: 1, label: '项目编号', width: 90 }, { id: 2, label: '文件名称' }, { id: 3, label: '上传时间' }, { id: 4, label: '分析状态' }, { id: 5, label: '判断结果' }],
			hisTableData: [],
			options: [
				{
					value: 'up_load_pcap',
					label: '选择分析流量包',
				},
				{
					value: 'up_load_floder',
					label: '源码分析',
				},
				{
					value: 'up_load_pcap_png',
					label: '流量图片化',
				},
				{
					value: 'link',
					label: '二进制和文本分析',
				},
			],
			value: 'up_load_pcap',
			fileList: [],
			uploadData: new FormData(),
			dataType: '',
			file: {},
			// multiple: false,
			// limit: 1
		}
	},
	computed: {
		multiple() {
			if (this.value == 'up_load_floder') {
				return true
			} else {
				return false
			}
		},
		limit() {
			if (this.value == 'up_load_pcap') {
				return 1
			} else {
				return 0
			}
		},
	},
	methods: {
		download() {
			this.$api.downRuleFile().then((res) => {
				if (res.status === 200) {
					console.log(res)
					const fileReader = new FileReader()

					fileReader.onload = (e) => {
						this.assetFileDownload(res) //返回流文件的处理方法
					}
					fileReader.readAsText(res.data)
				}
			})
		},
		/*
		 *  @params  data：流文件
		 *  @params  title： 文件名
		 */
		assetFileDownload(res) {
			const createA = document.createElement('a')
			createA.style.display = 'none'
			const blob = new Blob([res.data], { type: 'application/octet-stream' })
			createA.href = URL.createObjectURL(blob)
			// createA.download = decodeURI(res.headers['content-disposition'].split('filename=')[1]) || ''
			createA.download = 'rules_all_class.zip'
			document.body.appendChild(createA)
			createA.click()
			document.body.removeChild(createA)
		},

		toHistoryRecord() {
			this.$router.push({ path: '/resultPage' })
		},
		toToolsetList() {
			this.$router.push({ path: '/toolset' })
		},
		toTrafficList() {
			this.$router.push({ path: '/traffic' })
		},

		async submitUpload() {
			if (this.value !== 'up_load_floder') {
				this.$refs.upload.submit()
				var data = await this.$api.postAnalysis(this.uploadData)
			} else {
				// let fileDom = document.getElementById('fileInp');
				// console.log(fileDom)
				// fileDom.submit();
				console.log(this.uploadData)
				var data = await this.$api.postAnalysis('/2', this.uploadData)
				console.log(data)
			}

			this.$router.push({
				path: '/resultPage',
				query: {
					oneApi: data.data,
				},
			})
			this.fileList = []
		},
		handleRemove(file, fileList) {
			// console.log(file, fileList);
		},
		handlePreview(file) {
			// console.log(file);
		},
		handleChange(file, fileList) {
			this.uploadData = new FormData()
			console.log(file, fileList)
			this.form.name = file.name
			console.log(this.value)
			this.uploadData.append(this.value, file.raw)
		},
		// 文件夹上传
		uploadDirectory(e) {
			console.log(this.$refs.file.files)
			this.form.name = this.$refs.file.files[0].webkitRelativePath.split('/')[0]
			this.uploadData.append(this.value, this.$refs.file.files)
		},

		// 覆盖上传，自定义上传
		uploadFile(file) {
			// console.log(file.file)
			// this.uploadData.append("up_load_pcap", file.file);
			// console.log(this.uploadData)
		},
		selectChange() {
			console.log(this.value)
			if (this.value == 'link') {
				// window.dispatchEvent(
				//   new CustomEvent('textMessage', {
				//     detail: {
				//       eventName: 'textMessage'
				//     }
				//   })
				// )
				this.$router.push({
					path: '/resultPage',
					query: {
						data: 'second',
					},
				})
			}
		},
	},
}
</script>
<style scoped>
#pedigree .mycard {
	margin: 20px;
}
#pedigree .mycard h2 {
	font-family: PingFangSC-Medium, PingFang SC;
	color: rgba(51, 51, 51, 1);
	margin-bottom: 20px;
}

#pedigree .mycard .el-input {
	width: 500px;
}

#pedigree .mycard .uploadbtn {
	/* margin-left: 40px; */
}

#pedigree .mycard .linkbtn {
	margin-top: 80px;
	/* width: 180px; */
}
#pedigree .fileinput-button {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

#pedigree .fileinput-button input {
	position: absolute;
	right: 0px;
	top: 0px;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
	font-size: 200px;
	cursor: pointer;
}
</style>
<style>
#pedigree .mycard .el-upload-list__item-name {
	/* display: none; */
}
</style>
